<template>
	<div>
		<el-row :gutter="0">
			<div class="menu-box">
				<div class="node-box">
					<el-button type="primary" size="small" icon="el-icon-lx-add" @click="handleAdd(-1)">添加一级菜单</el-button>
				</div>
				<div class="node-box" v-for="(item,index) in menuList" :key="index" >
					<div class="controller">
						<span @click="handleEdit(index,-1)"><i :class="item.icon"></i> <span style="margin-left: 5px">{{item.title}}</span></span>
						<span class="el-icon-lx-deletefill" @click="handleDelete(index,-1)"></span>
						<el-button type="text" icon="el-icon-lx-add" @click="handleAdd(index)">添加菜单</el-button>
					</div>
					<div class="action-list">
						<div class="action" v-for="(action,aindex) in item.subs" :key="aindex">
							<span @click="handleEdit(index,aindex)">{{action.title}}</span>
							<span class="el-icon-lx-deletefill" @click="handleDelete(index,aindex)"></span>
						</div>
					</div>
				</div>
			</div>
		</el-row>
		<el-dialog  title="添加菜单" v-model="addVisible" custom-class="dialog-page">
			<el-form :model="formData" :rules="rules" label-width="100px" ref="formAdd">
				<el-form-item label="所属菜单">
					{{formData.ptitle}}
				</el-form-item>
				<el-form-item prop="icon" v-if="formData.pid === 0" label="菜单图标">
					<el-input v-model.trim="formData.icon" maxlength="80" show-word-limit class="short-input" placeholder="格式: el-icon-xxx"></el-input>
				</el-form-item>
				<el-form-item prop="title" label="菜单名称">
					<el-input v-model.trim="formData.title" maxlength="30" class="short-input" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item prop="path" label="跳转路径">
					<el-input v-model.trim="formData.path" maxlength="80" class="short-input" placeholder="请设置跳转路径"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
                <span class="dialog-footer">
                    <el-button @click="addVisible=false" size="small">取 消</el-button>
                    <el-button type="primary" @click="addSubmit" size="small">添 加</el-button>
                </span>
			</template>
		</el-dialog>
		<el-dialog  title="编辑菜单" v-model="editVisible" custom-class="dialog-page">
			<el-form :model="formData" :rules="rules" label-width="100px" ref="formEdit">
				<el-form-item label="所属菜单">
					{{formData.ptitle}}
				</el-form-item>
				<el-form-item prop="icon" v-if="formData.pid === 0" label="菜单图标">
					<el-input v-model.trim="formData.icon" maxlength="80" show-word-limit class="short-input" placeholder="格式: el-icon-xxx"></el-input>
				</el-form-item>
				<el-form-item prop="title" label="菜单名称">
					<el-input v-model.trim="formData.title" maxlength="30" class="short-input" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item prop="path" label="跳转路径">
					<el-input v-model.trim="formData.path" maxlength="80" class="short-input" placeholder="请设置跳转路径"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible=false" size="small">取 消</el-button>
                    <el-button type="primary" @click="saveSubmit" size="small">保 存</el-button>
                </span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import { ref, reactive,toRaw, defineComponent } from "vue";
export default defineComponent({name:'routelist'})
</script>
<script setup>
import {menuAdd, getMenuList, menuMod, menuDelete} from "../../api/api";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import Methods from "../../utils/Methods";
const addVisible = ref(false)
let loading = null
let editId = ''
const editVisible = ref(false)
const formAdd = ref(null)
const formEdit = ref(null)
const menuList = ref([])
const formData = reactive({
	pid: 0,
	ptitle: '',
	icon: 'el-icon-lx-home',
	title: '',
	path: ''
})
const loadingStart = () => {
	loading = ElLoading.service({
		lock: true,
		text: 'Loading',
		spinner: 'el-icon-loading',
		background: 'rgba(0, 0, 0, 0.3)',
	})
}
const getData = () => {
	getMenuList({}).then(res => {
		let list = res
		let plist = []
		for(let index in list) {
			if(list[index].pid === 0) {
				plist.push(list[index])
			}
		}
		for(let pindex in plist) {
			let subs = []
			for(let index in list) {
				if(list[index].pid === plist[pindex].id) {
					subs.push(list[index])
				}
			}
			plist[pindex].subs = subs
		}
		menuList.value = plist
	}).catch(err => {
		console.log(err)
	})
}
getData()
const handleAdd = (index) => {
	if(index === -1) {
		formData.pid = 0
		formData.ptitle = '顶级菜单'
	}else {
		formData.pid = menuList.value[index].id
		formData.ptitle = menuList.value[index].title
	}
	formData.icon = ''
	formData.title = ''
	formData.path = ''
	addVisible.value = true
}
const handleEdit = (pindex,index) => {
	if(index === -1) {
		editId = menuList.value[pindex].id
		formData.pid = 0
		formData.ptitle = '顶级菜单'
		formData.icon = menuList.value[pindex].icon
		formData.title = menuList.value[pindex].title
		formData.path = menuList.value[pindex].path
	}else {
		formData.pid = menuList.value[index].id
		editId = menuList.value[pindex].subs[index].id
		formData.ptitle = menuList.value[pindex].title
		formData.title = menuList.value[pindex].subs[index].title
		formData.path = menuList.value[pindex].subs[index].path
	}
	editVisible.value = true
}
const handleDelete = (pindex,index) => {
	let id = ''
	id = index === -1 ? menuList.value[pindex].id : menuList.value[pindex].subs[index].id
	ElMessageBox.confirm("删除菜单将不可恢复, 确定要删除吗？", "警告!", {
		type: "warning",
	}).then(() => {
		let data = { id: id }
		return menuDelete(data)
	}).then(res => {
		ElMessage.success("删除成功")
		if(index === -1) {
			id = menuList.value.splice(pindex,1)
		}else {
			id = menuList.value[pindex].subs.splice(index,1)
		}
	}).catch(err => {
		console.log(err,'----delete err')
	})
}
const rules = {
	title: [{ required: true, message: "请输入菜单名", trigger:"blur" },],
	path: [{ required: true, message: "请设置跳转路径", trigger:"blur" },],
};
const addSubmit = () => {
	formAdd.value.validate((valid) => {
		if (valid) {
			let data = toRaw(formData)
			loadingStart()
			menuAdd(data).then(res => {
				ElMessage.success("添加成功")
				getData()
				addVisible.value = false
				loading.close()
			}).catch(err => {
				console.log(err,'---menuadd')
				loading.close()
			})
		} else {
			return false
		}
	})
}

const saveSubmit = () => {
	formEdit.value.validate((valid) => {
		if (valid) {
			let data = toRaw(formData)
			data.id = editId
			data.token = Methods.getLocalStorage('admin_token')
			loadingStart()
			menuMod(data).then(res => {
				ElMessage.success("保存成功")
				getData()
				editVisible.value = false
				loading.close()
			}).catch(err => {
				console.log(err,'---menuMod')
				loading.close()
			})
		} else {
			return false
		}
	})
}


</script>
<style scoped lang="scss">
.menu-box {
	width: 300px;
}
.node-box {
	width: 100%;
	padding: 15px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.controller {
	cursor: pointer;
	display: flex;
	align-items: center;
	&:hover {
		color: #409eff;
	}
}
.action-list {
	padding: 10px 10px 10px 45px;
	.action {
		margin-right: 15px;
		width: 200px;
		font-size: 15px;
		cursor: pointer;
		display: flex;
		height: 30px;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: space-between;
		&:hover {
			color: #409eff;
		}
	}
}
.el-icon-lx-deletefill {
	width: 40px;
	text-align: center;
	color: grey;
}
::v-deep(.dialog-page) {
	max-width: 1200px;
	min-width: 800px;
}
.short-input {
	width: 400px;
}

</style>
